  <div class="selectionZone">
    <div class="boxesZone">
      <div class="filterZone">
        <select onChange="selectRoom(this.value);">
          <?php foreach ($rooms as $room): ?>
          <option><?php echo $room ?></option>
          <?php endforeach; ?>
         </select>
      </div>
      <?php foreach ($boxs as $box): ?>
      
      <a href="<?php echo url_for('boxes/show?id='.$box->getId()) ?>">
	<div class="box" id="Box<?php echo $box->getId(); ?>"> 
	  <?php echo $box->getBoxName() ?><br/>
<!--	  <?php echo $box->getBoxSize() ?><br/>-->
	  <div class="roomTxt" style="display: none"><?php echo $box->getRoom() ?></div>
<!--	  <ul id="BoxList<?php echo $box->getId(); ?>">
		<?php foreach($box->getBoxAttribution() as $boxAttribution) { ?>
			<?php $item = $boxAttribution->getItem(); ?>
			<?php echo "<li id='liBox".$box->getId()."Item".$item->getId()."'><a href='#' onclick='deleteItem(".$item->getId().",".$box->getId().")'>".$item."</a></li>"; ?>
		<?php } ?>
          </ul>-->
	</div>
      </a>
      <?php endforeach; ?>
    </div>
    <div class="itemZone" id="itemList">
      <div class="filterZone">
	  <input type="text" class="Searchbox" onChange="searchAndShow(this.value)"/>
      </div>
      <?php foreach ($freeItems as $item): ?>
	<?php if($item->getBoxAttribution()->count()==0) { ?>
	<div class="dragableBox" id="Item<?php echo $item->getId(); ?>" <?php if(file_exists)) ?>><a href="<?php url_for('items/edit?id='.$item->getId())?>"><?php echo $item ?></a></div>
      <?php } endforeach; ?>
    
    </div>
  </div>
<script type="text/javascript">

function selectRoom(Text){
  $('.box').each(
    function(index, elem) {
      if($(this).text().indexOf(Text)>=0){
        $(this).css("display",'block');
      } else {
        $(this).css("display",'none');
      }
    });
}

function searchAndShow(Text){
  $('.dragableBox').each(
    function(index, elem) {
      if($(this).text().indexOf(Text)>=0){
        $(this).css("display",'block');
      } else {
        $(this).css("display",'none');
      }
    });
}

function deleteItem(ItemId, BoxId) 
{
  $.ajax({
    url: "<?php echo url_for('boxes/rem2box'); ?>/box/"+BoxId+"/item/"+ItemId,
    context: document.body,
    success: function(){
      $('#itemList').append('<div class="item" id="Item'+ItemId+'"><a href="items/edit/id/'+ItemId+'">'+$('#liBox'+BoxId+'Item'+ItemId).text()+'</a></div>');
      $('#liBox'+BoxId+'Item'+ItemId).remove();
    }
  });
}
// Custom drop actions for <div id="dropBox">
function add2Box(idOfDraggedItem,targetId,x,y)
{
 target = targetId.replace('Box', '');
 targetList = targetId.replace('Box', 'BoxList');
 source = idOfDraggedItem.replace('Item', '');
$.ajax({
  url: "<?php echo url_for('boxes/add2box'); ?>/box/"+target+"/item/"+source,
  context: document.body,
  success: function(){
    $('#'+targetList).append('<li id="liBox'+target+'Item'+source+'"><a href="#" onclick="deleteItem('+source+','+target+')">'+$('#'+idOfDraggedItem).text()+'</a></li>');
    $('#'+idOfDraggedItem).remove();	
  }
});	
}

var dragDropObj = new DHTMLgoodies_dragDrop();
<?php foreach ($freeItems as $item): ?>
        <?php if($item->getBoxAttribution()->count()==0) { ?>
        dragDropObj.addSource('Item<?php echo $item->getId(); ?>',true);
	<?php } ?>
<?php endforeach; ?>

<?php foreach ($boxs as $box): ?>
	dragDropObj.addTarget('Box<?php echo $box->getId(); ?>','add2Box');
<?php endforeach; ?>
dragDropObj.init();
</script>

